<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:800px;height: 220px;margin: 0 auto;position: relative;overflow: hidden;}

    .box .imgbox{width: 4000px;position: absolute;left:0;}
    .box .imgbox img{width: 800px;height: 220px;float: left;}
    
    .box .btns input{position: absolute;width: 30px;height: 30px;top: 95px;}
    .box .btns .left{left:0}
    .box .btns .right{right:0}
  </style>
</head>
<body>
  <div class="box">
    <div class="imgbox">
      <img src="./imgs/banner1.jpg" alt="">
      <img src="./imgs/banner2.jpg" alt="">
      <img src="./imgs/banner3.jpg" alt="">
      <img src="./imgs/banner4.jpg" alt="">
      <img src="./imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" value="左" class="left">
      <input type="button" value="右" class="right">
    </div>
  </div>
</body>
<script src="../move.js"></script>
<script>

  var left = document.querySelector(".left");
  var right = document.querySelector(".right");
  var imgbox = document.querySelector(".imgbox");
  var imgs = document.querySelectorAll(".imgbox img");

  var index = 2;
  imgbox.style.left = -index * imgs[0].offsetWidth + "px";

  left.onclick = function(){
    if(index === 0){
      index = imgs.length-1;
    }else{
      index--;
    }
    move(imgbox, {
      left: -index * imgs[0].offsetWidth
    })
  }

  right.onclick = function(){
    if(index === imgs.length-1){
      index = 0;
    }else{
      index++;
    }
    move(imgbox, {
      left: -index * imgs[0].offsetWidth
    })
  }
  
</script>
</html>